<template>
  <el-button type="text" size="mini" :disabled="disabled" @click="dialogFormVisible=true">商品弹窗</el-button>

  <el-dialog v-model="dialogFormVisible" title="商品弹窗设置" width="30%" :append-to-body="true">
    <el-form :model="form" ref="formRef" :rules="rules">
      <!--<el-form-item label="弹出类型" :label-width="formLabelWidth" prop="type">
        <el-input v-model="form.type" autocomplete="off" placeholder="请输入弹出类型" />
      </el-form-item>-->
      <el-form-item label="弹出时间(秒)" :label-width="formLabelWidth" prop="msgtime">
        <el-input-number v-model="form.msgtime" :step="1" :min="3" :max="180" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleFormConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
  import { ref,reactive } from 'vue'
  import { sendPopupGoodsMsg } from "@/api/message/index"
  import {ElMessage, ElMessageBox} from 'element-plus'
  export default {
    name: "PopupGoods",
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      row: {
        type: Object,
        required: true
      },
      mediaid: {
        type: Number,
        default: undefined
      },
    },
    emits: [],
    //setup(props, context) {
    setup(props) {
      const dialogFormVisible = ref(false)
      const formLabelWidth = '100px'
      const formRef= ref(null)
      const form = ref({
        type: '',
        msgtime: 3,
      })

      const rules = reactive({
        // type: { required: true, message: '请输入弹出类型', trigger: 'blur' },
        msgtime: { required: true, message: '请输入弹出时间', trigger: 'blur' },
      })
      const handleFormConfirm = () => {
        formRef.value.validate(valid => {
          if (valid) {
            ElMessageBox.confirm("确定给直播间发送商品 <span style='color:#409EFF'>" + props.row.goods_name + "</span> 的弹窗消息吗？", '发送消息', {
              dangerouslyUseHTMLString: true,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let query = { mediaid: props.mediaid, goodsid: props.row.goods_id, seriesid: 0, type: form.value.type, msgtime: form.value.msgtime }
              sendPopupGoodsMsg(query).then(response => {
                dialogFormVisible.value = false
                if (response.errcode == 0) {
                  ElMessage({ type: 'success', message: '发送成功', duration: 2000 })
                }else{
                  ElMessage({ type: 'warning', message: '发送失败', duration: 2000 })
                }
              })
            }).catch(() => { })
          }
        })
      }
      /*const reloadSeriesList = () => {
        context.emit('reloadSeries')
      }
      const handleSeriesSortDown = () => {
        resortSeries({mediaid: props.row.mediaid, seriesid: props.row.seriesid, action: 'down'}).then(response => {
          if (response.errcode == 0) {
            reloadSeriesList()
          }
        })
      }
      const handleSeriesSortUp = () => {
        resortSeries({mediaid: props.row.mediaid, seriesid: props.row.seriesid, action: 'up'}).then(response => {
          if (response.errcode == 0) {
            reloadSeriesList()
          }
        })
      }*/
      return {
        dialogFormVisible,
        formLabelWidth,
        formRef,
        form,
        rules,
        handleFormConfirm
        //handleSeriesSortUp,
        //handleSeriesSortDown
      }
    }
  }
</script>

<style scoped>

</style>
